<template>
  <div class="from">
    <span v-show="children" style="margin-left: 10px">子菜单添加</span>
    <span v-show="childrenchange" style="margin-left: 10px">子菜单修改</span>
    <el-form :model="ruleForm" :rules="rules" ref="formName" label-width="100px" class="demo-ruleForm">
      <el-form-item label="菜单名称:" prop="name">
        <el-input v-model="ruleForm.name" size="small"></el-input>
      </el-form-item>
      <el-form-item label="菜单路径:" prop="path">
        <el-input v-model="ruleForm.path" size="small"></el-input>
      </el-form-item>
      <el-form-item label="路由地址:" prop="route">
        <el-input v-model="ruleForm.route" size="small"></el-input>
      </el-form-item>
      <el-form-item label="菜单图标:" prop="icon">
        <el-input v-model="ruleForm.icon" size="small"></el-input>
      </el-form-item>
      <el-form-item label="权限说明:" prop="content">
        <el-input v-model="ruleForm.content" size="small"></el-input>
      </el-form-item>
      <el-form-item label="权限等级:" prop="level">
        <el-input v-model="ruleForm.level" size="small"></el-input>
      </el-form-item>
      <el-form-item label="排序:" prop="sort">
        <el-input v-model="ruleForm.sort" size="small"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="modify" v-if="status == 1">修改</el-button>
        <el-button type="primary" @click="onSubmit" v-if="status == 2">创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import superadmin from '@/api/superadmin'
export default {
  props: {
    chstatus: {
      type: Number,
      default() {
        return
      },
    },
    parents: {
      type: Number,
      default() {
        return
      },
    },
    send: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      status: 2,
      childrenchange: false,
      ruleForm: {
        content: '',
        icon: '',
        id: '',
        level: '',
        name: '',
        // 权限ID
        parentsId: 0,
        path: '',
        sort: '',
        type: 0,
        route: '',
      },
      children: false,
      rules: {
        name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
        path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
        route: [{ required: true, message: '请输入路由名称', trigger: 'blur' }],
      },
    }
  },
  watch: {
    deep: true,
    send(newval, oldval) {
      this.ruleForm.id = this.send.permissionId
      this.ruleForm.parentsId = this.send.parentsId
      this.ruleForm.name = this.send.name
      this.ruleForm.level = this.send.level
      this.ruleForm.icon = this.send.icon
      this.ruleForm.route = this.send.route
      this.ruleForm.content = this.send.content
      this.ruleForm.path = this.send.path
      this.ruleForm.sort = this.send.sort
      this.status = 1
    },
    chstatus(newval, oldval) {
      if (newval == 1) {
        this.status = 2
        this.children = true
      }
    },
  },

  methods: {
    modify() {
      superadmin.changeper(this.ruleForm).then(e => {
        if (e.code == 200) {
          this.$message({
            message: '修改成功！',
            type: 'success',
          })
          this.$refs['formName'].resetFields()
          this.$router.go(0)
        } else {
          this.$message({
            message: e.msg,
            type: 'error',
          })
        }
      })
    },
    onSubmit() {
      this.ruleForm.id = ''
      this.ruleForm.parentsId = this.parents
      this.$refs['formName'].validate(valid => {
        if (valid) {
          superadmin.sentrouter(this.ruleForm).then(e => {
            if (e.code == 200) {
              this.$message({
                message: e.msg,
                type: 'success',
              })
              this.$router.go(0)
              this.$refs['formName'].resetFields()
            }
          })
        }
      })
    },
    changemes(val) {
      switch (val) {
        case 1:
          this.children = false
          this.childrenchange = false
          break
        case 2:
          this.$refs['formName'].resetFields()
          this.ruleForm.content = '2级路由'
          this.ruleForm.level = 2
          this.ruleForm.id = ''
          this.status = 2
          this.children = false
          this.childrenchange = false
          break
        case 3:
          this.$refs['formName'].resetFields()
          this.childrenchange = true
          this.children = false
          break
        default:
          break
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.from {
  padding: 20px;
  ::v-deep .el-input {
    width: 337px;
  }
}
</style>
